
.my-ticket{
    padding: 0 10px;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    .top-img{
        width: 100vw;
        height: 150px;
        background-color: rgb(14, 59, 205);
        position: relative;
        left: -10px;
    }
    .top-change-status{
        width: 100%;
        height: 45px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        position: relative;
        top: -22.5px;
        justify-content: space-around;
        text-align: center;
        .change-status-list{
            width: 36px;
            color: #666;
            &.border-bottom{
                color: #000;
                border-bottom: 2px solid blue;
                line-height: 40px;
            }
        }
    }
    .content-wrap{
        width: 100%;
        margin-top: -10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        height: 460px;
        overflow-x: hidden;
        overflow-y: auto;
        .content-list{
            background-color: #fff;
            padding: 20px 10px;
            margin-bottom: 10px;
            position: relative;
            &:last-of-type{
                margin-bottom: 20px;
            }
            .circle-left{
                width: 20px;
                height: 20px;
                background-color: #f5f5f5;
                border-radius: 999px;
                position: absolute;
                left: -10px;
                bottom: 65px;
            }
            .circle-right{
                width: 20px;
                height: 20px;
                background-color: #f5f5f5;
                border-radius: 999px;
                position: absolute;
                right: -10px;
                bottom: 65px;
            }
            .top-title{
                font-weight: 600;
            }
            .top-oid-wrap{
                margin: 10px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .top-oid{
                    color: #666;
                }
                .icon{
                    font-size: 16px;
                    color: #666;
                    position: relative;
                    top: 3px;
                    margin-left: 5px;
                }
            }
            .goods-wrap{
                .goods-list{
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    .left{
                        width: 88px;
                        height: 88px;
                        margin-right: 10px;
                    }
                    .right{
                        width: calc(100% - 100px);
                        height: 88px;
                        padding-right: 10px;
                        box-sizing: border-box;
                        .name-wrap{
                            display: flex;
                            font-size: 14px;
                            align-items: center;
                            .name{
                                margin-right: 10px;
                                font-size: 15px;
                                line-height: 14px;
                            }
                            .rule{
                                color: #666;
                            }
                        }
                        .enname{
                            margin-bottom: 20px;
                            color: #888;
                        }
                        .price-wrap{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                            .price{
                                color: rgb(232, 10, 10);
                                font-weight: 600;
                                font-size: 14px;
                            }
                            .count{
                                color: #666;
                            }
                        }
                    }
                    &:last-of-type{
                        border-bottom: 1px dashed #ddd;
                        padding-bottom: 20px;
                    }
                }
            }
            .create-at{
                color: #444;
                margin: 10px 0;
            }
            .total-wrap{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .total-count{
                    color: #777;
                }
                .total-price{
                    color: rgb(235, 10, 10);
                    font-weight: 600;
                    font-size: 14px;
                }
            }
        }
    }
}